<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="index page" >
        我是首页的内容
    </div>
    <div class="detail page" style="display: none;">
        我是详情页的内容
    </div>
    <div class="order page" style="display: none;">
        我是订单页的内容
    </div>
    <div class="tab">
        <span class="btn" data-index="1">首页</span>
        <span class="btn" data-index="2">详情页</span>
        <span class="btn" data-index="3">订单页</span>
    </div>
</body>
<script>
    const btns = document.querySelectorAll('.btn')
    const pages = document.querySelectorAll('.page')
    btns.forEach(item => {
        item.onclick = () => {
            const index = item.getAttribute('data-index')
            console.log(index)
            pages.forEach(page => {
                page.style.display = 'none'
            })
            pages[Number(index)-1].style.display = 'block'
        }
    })
</script>
</html>